﻿/*  NavMenu */
.fluent-nav-menu {
    flex-direction: column;
    align-items: stretch;
}

::deep .fluent-nav-item {
    margin: calc(var(--design-unit) * 1px + 1px) 0;
    -webkit-user-select: none;
    user-select: none;
}

    /* Hover and active highlighting */
    ::deep .fluent-nav-item .positioning-region:hover:not(:has(.disabled)) {
        cursor: pointer;
        background: var(--neutral-fill-secondary-rest);
    }

    ::deep .fluent-nav-item a.active {
        background: var(--neutral-fill-secondary-rest);
    }

        /* Active item indicator */
        ::deep .fluent-nav-item a.active .positioning-region::before {
            content: "";
            display: block;
            position: absolute;
            right: unset;
            width: 3px;
            height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) / 2) * 1px);
            background: var(--accent-fill-rest);
            border-radius: calc(var(--control-corner-radius) * 1px);
            margin: calc(var(--design-unit) * 2px) 2px;
            z-index: 5;
        }

[dir='rtl'] * ::deep .fluent-nav-item a.active .positioning-region::before {
    left: unset;
}

::deep .content-region {
    display: flex;
    align-items: center;
    white-space: nowrap;
    width: 100%;
    margin-inline-start: calc(var(--design-unit) * 2px);
}

/* Nav items */
::deep .fluent-nav-item .positioning-region {
    display: flex;
    width: 100%;
    position: relative;
    align-items: center;
    box-sizing: border-box;
    background: var(--neutral-fill-stealth-rest);
    border: calc(var(--stroke-width) * 1px) solid transparent;
    border-radius: calc(var(--control-corner-radius) * 1px);
    min-height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) + 1) * 1px);
}

::deep .fluent-nav-group .fluent-nav-item:last-of-type, .fluent-nav-menu .fluent-nav-item:last-of-type {
    margin-bottom: 0;
}

/* level indenting */
::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item .content-region {
    padding-inline-start: 24px;
}

::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item .content-region {
    padding-inline-start: 48px;
}

::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item .content-region {
    padding-inline-start: 72px;
}

::deep .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item .content-region {
    padding-inline-start: 96px;
}

::deep .fluent-nav-text {
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 70px);
}

/* collapsed */
::deep.collapsed .fluent-nav-text {
    display: none;
}

::deep.collapsed .expand-collapse-button {
    display: none;
}

::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item {
    display: none;
}

    ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item {
        display: none;
    }

        ::deep.collapsed .fluent-nav-group * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item * .fluent-nav-menu > .fluent-nav-item {
            display: none;
        }
